.menu .title { position: absolute; right: 5px; top: 5px; font-size: 12pt; font-weight: bold; }
.menu .title .version { background-color: gray; color: white; border-radius: 10px; padding: 3px 5px; font-size: 9pt; }
#specEditor		{ position: absolute; left: 0;   right: 70%; top: 0;   bottom: 0%; }
#outputViewer	{ position: absolute; left: 30%; right: 0;   top: 0;   bottom: 0; }

textarea.fill,
#specEditor textarea,
#specEditor .measureHelper,
#exampleEditor textarea {
	position: absolute; left: 0; right: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: 100%; max-height: 100%;
	border: 0;
	font-size: 10pt; font-family: monospace;
	padding: 5px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#specEditor textarea,
#specEditor .measureHelper,
#exampleEditor textarea {
	background-color: #ffe;
}

#specEditor .editor { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
#specEditor textarea,
#specEditor .measureHelper { background-color: #2d2d2d; color: silver; font-size: 11pt; }

#specEditor .measureHelper { margin: 0; padding: 0; display: inline; min-height: 0; height: auto; }

#specEditor .editorWideToggle { color: silver; position: absolute; right: 5px; font-size: 18pt; cursor: e-resize; }
.editorWide #specEditor .editorWideToggle { cursor: w-resize; }
.editorWide #specEditor { right: 50%; }
.editorWide #outputViewer { left: 50%; }

#locale { position: absolute; left: 5px; bottom: 5px; }

#outputViewer { background-color: #eee; }
#outputViewer .menu { position: absolute; left: 0; right: 0; top: 0; height: 30px; background-color: #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 5px; }
#outputViewer #output { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; padding: 0px; overflow: auto; }
#outputViewer #output .file { padding: 10px; border-bottom: 1px solid silver; font-size: 9pt; }

#output > div { border: 1px solid silver; position: absolute; overflow: auto; border-radius: 5px; font-size: 9pt; }
#output > div h1 { padding: 5px; margin: 0; font-size: 10pt; }
#output > div ul { padding: 0 5px; }
#output > div ul li { list-style-type: none; white-space: nowrap; }
#output > div .buttonRow { position: absolute; top: 3px; right: 3px; }
button.mini,
#output > div ul li button { border: 1px solid gray; background-color: white; border-radius: 10px; width: 12px; height: 12px; line-height: 10px; display: inline-block; padding: 0; color: black; }
#output .operation { background-color: #ffe; border-top-left-radius: 20px; }
#output .operation .path { padding-left: 30px; padding-top: 10px; padding-right: 5px; font-weight: bold; }
#output .operation .path b { background-color: gray; color: white; text-transform: uppercase; width: 50px; padding: 2px; font-size: 7pt; display: block; position: absolute; text-align: center; transform: rotate(-45deg); transform-origin: 100% 0; left: -39px; top: -23px; padding-top: 20px; }

#output .operation ul li.required { font-weight: bold; }

#output .operation.delete { background-color: #feeeee; border-color: #f93e3f; }
#output .operation.delete .path b { background-color: #f93e3f; }

#output .operation.post { background-color: #eefaf5; border-color: #49cc90; }
#output .operation.post .path b { background-color: #49cc90; }

#output .operation.get { background-color: #f0f7ff; border-color: #61affe; }
#output .operation.get .path b { background-color: #61affe; }

#output .operation.put { background-color: #fff6ec; border-color: #fca130; }
#output .operation.put .path b { background-color: #fca130; }

#output .schema { background-color: white; }

#output .summary { max-width: 250px; padding: 5px 5px 0 10px; white-space: pre-wrap; }
#output .description { max-width: 250px; padding: 5px 5px 0 10px; white-space: pre-wrap; }

.arrow { transform: rotate(30deg); transform-origin: 0 0; border-width: 0px; border-style: solid; border-color: black; border-top-width: 1px; width: 100px; position: absolute; display: block; padding: 0; top: 100px; left: 100px; }
.arrow::after { content: " "; position: absolute; width: 5px; height: 5px; border-width: 0px; border-right-width: 1px; border-top-width: 1px; border-style: inherit; border-color: inherit; transform: rotate(45deg); transform-origin: 100% 0; right: 0; }
.arrow.array,
.arrow.propertyArray { border-style: dashed; }

.changed { color: goldenrod; }

.settings { background-color: yellowgreen; color: white; padding: 15px; margin: 7px 7px 0 7px; border-radius: 5px; cursor: pointer; border: 3px solid yellowgreen; font-size: 20px; }
.settings.new { background-color: transparent; color: yellowgreen; border-style: dashed; }

@media print {
	#specEditor { display: none; }
	#outputViewer { position: static; left: 0; }
	#outputViewer .menu { display: none; }
	#outputViewer #output { position: static; }
}
